<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>骑行</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
</head>

<body>
    <div class="app-exercise-run dpflex fdcolumn">

        <!-- 头部 -->

        <!-- 内容 -->
        <div class="run-content">
            <p>目前累积跑步距离:</p>
            <p class="distance">999.99 <span>公里</span></p>

            <!-- 地图以及里面的内容 -->
            <div id="container">
                <div class="map">
                    <p class=" dpflex">
                        <button style="z-index: 3;">户外跑</button>
                        <button style="z-index: 3;">燃脂跑</button>
                        <button style="z-index: 3;">跑步机</button>
                    </p>
                    <div class="readygo"  style="z-index: 3;">
                        <span class="go" id="go">
                            GO
                        </span>
                    </div>
                    <div class="setarget dpflex" style="z-index: 3;">
                        <li> <span class="iconfont icon-set
                            "></span> </li>
                        <li> <button>设置目标></button> </li>
                        <li><span class="iconfont icon-miusic1
                            "></span></li>
                    </div>
                </div>
    
            </div>

            <!-- 跑步路线 -->
            <div class="way">
                <h3>骑行路线</h3>
                <p>使用骑行路线, 邂逅附近的同行者</p>
                <span class="iconfont icon-rightarrow
                "></span>
            </div>
        </div>

    </div>

    <!-- 加载地图JSAPI脚本 -->
    <script src="https://webapi.amap.com/maps?v=2.0&key=bbb7416b1d78c8012cb1fc73792977df"></script>
</body>

</html>